<html>
    <head>
        <title>逻辑层和视图层分离的利与弊</title>
    </head>
    <body>
        <script>
            /*
                 4、逻辑层和视图层分离的利与弊

                                逻辑层和视图层分离，好处是 js 运算不卡渲染，  最简单直接的感受就是： "窗体动画稳"。

                                如果开发者使用过App ，应该又概念，webview 新窗体一边做进入动画，一边自身渲染，很容易卡动画。

                                而uni-app则无需写"预载代码"，新窗体渲染块且动画稳定。

                                但是两层分离也带来一个坏处，这两层互相通信，其实是"有损耗的"。

                                ios还好，但Android低端机上，每次通信都要耗时几十毫秒。平时看不出来，但有几个场景表现明显：

                                    ①、连续高帧率绘制 canvas 动画，会发现还不如 webview内部绘制流畅

                                    ②、视图层滚动、跟手操作，不停反馈给逻辑层，js 再处理逻辑并通知视图层做出对应更新。此时会发现交互不跟手或卡。

                                不管"小程序"还是"app" ,不管 app-vue 还是 app-nvue ，都有这两个层通信损耗的问题。(小程序和app都有通讯问题)

                                解决这类问题，在 webview 渲染和原生渲染应用了不同的做法：

                                     ①、webview渲染的视图层：

                                          在 "app-vue" 和 "微信小程序" 上，提供了一种运行于视图层的专属 js ,微信叫做 "wxs".

                                          wxs中可以监听手势，以 uni ui 的 swiperAction 组件为例，手指拖动，侧边的列表惨淡要跟手滑出，此时

                                          就需要使用wxs才能实现流畅效果。还有插件市场里一些自定义下拉刷新的插件，通过 wxs实现了更高的性能体验。

                                          uni-app 支持把 wxs 编译到 "微信小程序"、"App" 和 "H5中"。

                                          微信里对wxs限制较多，只能实现有限的功能。 app端提供了更强大的 renderjs，并兼容到 h5平台。

                                          比如 canvas 动画，微信的 canvas 无法通过 wxs操作，js不同绘制canvas动画因通信折损而无法流畅。

                                          uni-app的 app-vue 里的 canvas 对象设计在 webview 视图层的，通过renderjs可以在视图层直接操作canvas动画，

                                          将不再有通信折损，实现更流畅的效果，详见 ： renderjs https://uniapp.dcloud.net.cn/tutorial/renderjs.html


                                     ②、原生渲染的视图层

                                          在 app-nvue里，逻辑层和视图层的折损一样存在。包括 reavt native 也有这个问题。所以也千万被意味原生渲染就多么高级。

                                          weex提供了一套 bindingx机制，可以在 js里一次性传递一个表达式给原生层，有原生层解析后根据指令操作原生的视图层，

                                          避免反复跨层通信。这个技术在 uni-app 里也可以使用。

                                          bindingx 作为一种表达式，它的功能更呢不及js强大，但手势监听、动画还是可以实现的，比如 Uni ui的 swiperActin组件在app-vue 下运行时会自动启用 bindingx，以实现流畅跟手。

            */
        </script>
    </body>
</html>